<!-- 用户管理 -->
<template>
  <div class=''>
    <el-dialog title="博主信息修改" :visible.sync="dialogFormVisible">

      <div class="row" v-loading="isOp" v-if="currentIndex != -1">

        <div class="col-6">
          <el-avatar :size="70" :src="users.records[currentIndex].avater"></el-avatar>

          <!-- <input v-model="users.records[currentIndex].avater" class="form-control" type="text"
                placeholder="头像链接粘贴到这里"> -->

        </div>
        <div class="col-6">

          <el-tooltip class="item" effect="light" content="头像违规请点击此按钮重置头像" placement="top">
            <el-button class="mt-10" icon="el-icon-warning-outline" circle
              @click="()=>{users.records[currentIndex].avater = re.avater;this.$forceUpdate();}"></el-button>
          </el-tooltip>
          <el-select :disabled="isUpdate || $commons.role() != 'ROOT'" class="mt-10" style="float:right;" v-model="users.records[currentIndex].role"
            placeholder="请选择角色">
            <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="col-sm-6">
          <div class="form-group">
            <input :disabled="isUpdate" v-model="users.records[currentIndex].nickname" class="form-control" type="text"
              placeholder="昵称">
          </div>

        </div>
        <div class="col-sm-6">

          <el-tooltip class="item" effect="light" content="昵称违规请点击此按钮重置昵称" placement="top">
            <el-button class="" icon="el-icon-warning-outline" circle
              @click="()=>{users.records[currentIndex].nickname = re.nickname;this.$forceUpdate();}"></el-button>
          </el-tooltip>
          <el-date-picker :disabled="isUpdate || users.records[currentIndex].role == 'ROOT'" style="float:right;" v-model="titled" type="datetime"
            placeholder="封号截至时间" align="right" :picker-options="pickerOptions">
          </el-date-picker>
          <!-- <el-select class="mt-10" style="float:right;" v-model="users.records[currentIndex].status" placeholder="请选择角色">
          <el-option v-for="item in statues" :key="item.value" :label="item.label" :value="item.value" :change="titled">
          </el-option>
        </el-select> -->
        </div>

        <div class="col-10">
          <div class="form-group">
            <input :disabled="isUpdate" v-model="users.records[currentIndex].slogan" class="form-control" type="text"
              placeholder="签名">
          </div>
        </div>
        <div class="col-2">
          <el-tooltip class="item" style="float:right;" effect="light" content="简介违规请点击此按钮重置简介" placement="top">
            <el-button class="mt-10" icon="el-icon-warning-outline" circle
              @click="()=>{users.records[currentIndex].slogan = re.slogan;this.$forceUpdate();}"></el-button>
          </el-tooltip>
        </div>
        <div class="col-12">
          <vue-core-video-player style="height:400px;" :autoplay="false" :src="users.records[currentIndex].vedio">
          </vue-core-video-player>
          <el-tooltip class="item" effect="light" content="影片违规请点击此按钮重置背景影片" placement="top">
            <el-button class="mt-10" icon="el-icon-warning-outline" circle
              @click="()=>{users.records[currentIndex].vedio = re.vedio;this.$forceUpdate();}"></el-button>
          </el-tooltip>
          <!-- <div class="form-group">
            <input v-model="users.records[currentIndex].vedio" class="form-control" type="text" placeholder="背景影片粘贴到这里">
          </div> -->
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :loading="isUpdate" type="primary" @click="update">修 改</el-button>
      </div>
    </el-dialog>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input class="ml-10" v-model="id" placeholder="搜索ID">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input class="ml-10" v-model="nickname" placeholder="搜索昵称">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input class="ml-10" v-model="username" placeholder="搜索邮箱">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="sex" placeholder="请选择性别" clearable>
          <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="role" placeholder="请选择角色" clearable>
          <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-button class="ml-10" icon="el-icon-search" circle :loading="isSearch" @click="getUsers()"></el-button>

      <el-col :span="4">
      </el-col>
    </el-row>


    <el-table :data="users.records" style="width: 100%" v-loading="isSearch" @row-dblclick="(row, column, event)=>{$commons.toWindodAuthor(row.id)}">
      <el-table-column label="ID" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="60">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.avater"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="昵称" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="50">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ $commons.map(scope.row.sex) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ $commons.map(scope.row.role) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          <span
            style="margin-left: 10px">{{scope.row.titled == 0?'正常':'违规'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="签名" width="300">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" :content="scope.row.slogan" placement="top">
            <span style="margin-left: 10px">{{ $commons.overflowHidForText(scope.row.slogan,18) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-area mb-30 mt-20 wow fadeInUp animated">
      <nav aria-label="Page navigation example">
        <el-pagination style="float:left;" layout="prev, pager, next" :total="users.total" :current-page="users.current"
          @current-change="pageChange">
        </el-pagination>
      </nav>
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        re: {
          vedio: 'http://dev.kingyin.club:9000/cloud/2022225/短视频/1640999005_1645868970708.mp4',
          slogan: '这个博主还在思考，到底该写什么才能引起你的注意。',
          nickname: '违规昵称',
          avater: 'http://dev.kingyin.club:9000/cloud/pic/littleghost.png'
        },
        isOp: false,
        dialogFormVisible: false,
        currentIndex: -1,
        users: {
          total: 0,
          size: 10,
          current: 1,
          records: []
        },
        isSearch: false,
        id: '',
        username: '',
        nickname: '',
        sex: '',
        role: '',
        titled: '',
        sexs: [{
          label: '男',
          value: 'MAN'
        }, {
          label: '女',
          value: 'WOMAN'
        }],
        roles: [{
          label: '博主',
          value: 'USER'
        }, {
          label: '管理员',
          value: 'ADMIN'
        }, {
          label: '超级用户',
          value: 'ROOT'
        }],
        pickerOptions: {
          shortcuts: [{
              text: '解封',
              onClick(picker) {
                picker.$emit('pick', 0);
              }
            }, {
              text: '封号1天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            },
            {
              text: '封号3天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 3);
                picker.$emit('pick', date);
              }
            },
            {
              text: '封号7天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            },
            {
              text: '封号15天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 15);
                picker.$emit('pick', date);
              }
            },
            {
              text: '封号30天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
                picker.$emit('pick', date);
              }
            },
            {
              text: '封号90天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 90);
                picker.$emit('pick', date);
              }
            },
            {
              text: '封号180天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 180);
                picker.$emit('pick', date);
              }
            },
            {
              text: '封号365天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 365);
                picker.$emit('pick', date);
              }
            },
            {
              text: '封号3650天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 3650);
                picker.$emit('pick', date);
              }
            }
          ]
        },
        isUpdate: false
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      async update() {
        this.isUpdate = true;
        if (this.titled == '') {
          this.users.records[this.currentIndex].titled = 0;
        } else {
          var date = new Date(this.titled);
           this.users.records[this.currentIndex].titled = date.getTime();
        }
        this.users.records[this.currentIndex].password = 'MANAGE';
        this.users.records[this.currentIndex].unicode = this.users.records[this.currentIndex].vedio;
        await this.$api.user.update(this.users.records[this.currentIndex]);
        this.isUpdate = false;
      },
      async getVedio(user) {
        const pram = {
          id: user.id
        }
        var res = await this.$api.manage.vedio(pram);
        user.vedio = res.data.path;
      },
      async handleEdit(index, user) {        
        if (user.vedio == undefined) {
          await this.getVedio(user);
        }
        // console.log(user.titled);
        if (user.titled != 0)
          this.titled = this.$commons.timestampToTime(user.titled);
        this.currentIndex = index;
        this.dialogFormVisible = true;
      },
      handleDelete(index, user) {

      },
      pageChange(page) {
        this.users.current = page;
        this.getUsers();
      },
      async getUsers(page=false) {
        this.isSearch = true;
        const pram = {
          page: {
            current: page?this.users.current:1,
            size: this.users.size
          },
          o: {
            id: this.$commons.isEmptyString(this.id) ? null : this.id,
            username: this.$commons.isEmptyString(this.username) ? null : this.username,
            nickname: this.$commons.isEmptyString(this.nickname) ? null : this.nickname,
            sex: this.$commons.isEmptyString(this.sex) ? null : this.sex,
            role: this.$commons.isEmptyString(this.role) ? null : this.role
          }
        }
        var res = await this.$api.manage.users(pram);
        this.users = res.data;
        this.isSearch = false;
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getUsers();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类

</style>
